<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html" />
  <title>骇客帝国文字矩阵效果</title>
</head>

<body>
   <!--画布-->
  <canvas id="q"></canvas>
  <script type="text/javascript">
  // 窗口 屏幕
var s = window.screen;
// 画布的宽度等于屏幕的宽度
var width = q.width = s.width;
// 画布的高度等于屏幕的高
var height = q.height = s.height;
var letters = Array(300).join(1).split('');
var draw = function () {
  //让背景逐渐由透明到不透明
  q.getContext('2d').fillStyle='rgba(0,0,0,0.05)';
  // 填充矩形
  q.getContext('2d').fillRect(0,0,width,height);
  // 颜色
  // q.getContext('2d').fillStyle='#0F0';
  q.getContext('2d').fillStyle='blue';
  letters.map(function(y_pos, index){
    // text = 10;
            // 字符串  字符代码
    text = String.fromCharCode(3e4+Math.random()*33);
    x_pos = index * 10;
    q.getContext('2d').fillText(text, x_pos, y_pos);
    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
  });
};
// 设置时间间隔
setInterval(draw, 33);
</script>
</body>

</html>